const h = Vue.h
const ref = Vue.ref;

const app = Vue.createApp({
    setup(props, $) {
        const activeIndex = ref(1)
        const stepsIndex = ref(0)
        const idneRef = ref(idne)
        const iextRef = ref(iext)
        const dwrRef = ref(dwr)
        const ruleFormTable = ref(null)
        const userFormRef = ref(null)

        switch (install_step) {
            case 'init':
                stepsIndex.value = 0
                break
            case 'set_config':
                stepsIndex.value = 2
                break
            case 'install_db':
                stepsIndex.value = 3
                break
            case 'set_admin_user':
                stepsIndex.value = 4
        }

        const ruleForm = ref({
            hostname: '127.0.0.1',
            hostport: '3306',
            database: 'iflowApplication',
            username: 'root',
            password: 'root'
        })

        const userForm = ref({
            user_name: '',
            password: '',
            avatar: ''
        })

        const userFormRules = ref({
            user_name: [
                {
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'blur',
                }
            ],
            password: [
                {
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur',
                }
            ]
        })

        const rules = ref({
            hostname: [
                {
                    required: true,
                    message: '数据库地址不能为空',
                    trigger: 'blur',
                }
            ],
            hostport: [
                {
                    required: true,
                    message: '数据库端口不能为空',
                    trigger: 'blur',
                }
            ],
            database: [
                {
                    required: true,
                    message: '数据库名称不能为空',
                    trigger: 'blur',
                }
            ],
            username: [
                {
                    required: true,
                    message: '数据库账户不能为空',
                    trigger: 'blur',
                }
            ],
            password: [
                {
                    required: true,
                    message: '数据库密码不能为空',
                    trigger: 'blur',
                }
            ],
        })

        const nextStep = () => {
            switch (stepsIndex.value) {
                case 5 || 4:
                    window.location.reload()
                    break
                case 1:
                    submitForm()
                    break
                case 2:
                    installDataBase()
                    break
                case 3:
                    submitUserForm()
                    break
                default:
                    stepsIndex.value += 1
                    break
            }
        }

        // 保存服务端配置
        const submitForm = () => {
            const loading = ElementPlus.ElLoading.service({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            ruleFormTable.value.validate((valid) => {
                if (valid) {
                    axios.request({
                        url: '',
                        method: 'POST',
                        data: {
                            config: ruleForm.value,
                            install: 'config'
                        },
                        headers: {
                            'Authorization': sessionToken
                        }
                    }).then(({ data }) => {
                        ElementPlus.ElMessage[data.code === 200 ? 'success' : 'warning'](data.msg)
                        if (data.code === 200) {
                            stepsIndex.value += 1
                        }
                        loading.close()
                    })
                } else {
                    return false
                }
            })
        }

        // 保存服务端配置
        const submitUserForm = () => {
            const loading = ElementPlus.ElLoading.service({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            userFormRef.value.validate((valid) => {
                if (valid) {
                    axios.request({
                        url: '',
                        method: 'POST',
                        data: {
                            user: userForm.value,
                            install: 'user'
                        },
                        headers: {
                            'Authorization': sessionToken
                        }
                    }).then(({ data }) => {
                        ElementPlus.ElMessage[data.code === 200 ? 'success' : 'warning'](data.msg)
                        if (data.code === 200) {
                            stepsIndex.value += 1
                        }
                        loading.close()
                    })
                } else {
                    return false
                }
            })
        }

        // 安装数据库
        const installDataBase = () => {
            const loading = ElementPlus.ElLoading.service({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            axios.request({
                url: '',
                method: 'POST',
                data: {
                    install: 'db'
                },
                headers: {
                    'Authorization': sessionToken
                },
                timeout: 600000,
            }).then(({ data }) => {
                ElementPlus.ElMessage[data.code === 200 ? 'success' : 'warning'](data.msg)
                if (data.code === 200) {
                    stepsIndex.value += 1
                }
                loading.close()
            })
        }

        return {
            activeIndex,
            stepsIndex,
            idneRef,
            iextRef,
            dwrRef,
            ruleForm,
            rules,
            ruleFormTable,
            userForm,
            userFormRules,
            userFormRef,
            nextStep,
            submitForm,
            installDataBase
        }
    }
})
app.use(ElementPlus).mount('#app')
